<template>
    <q-page class="cc-admin">

        <div class="col bg-white shadow-2 q-pa-md q-ma-sm">
          <q-form class="row items-center justify-start q-mb-md" ref="searchForm">
            <q-item class="col-xl-3 col-md-3 col-sm-6 col-xs-12">
                <q-item-section class="col-3 text-right cc-dyn-search-label">
                    <q-item-label>标题：</q-item-label>
                </q-item-section>
                <q-item-section class="col row">
                    <q-input dense debounce="500" hide-bottom-space outlined v-model="searchForm.messageHeader" type="text" lazy-rules />
                </q-item-section>
            </q-item>
            <q-item class="col-md-3 col-sm-6 col-xs-12 items-center">
          <q-item-section>
            <div class="row justify-center">
              <q-btn
                unelevated
                no-wrap
                label="查询"
                color="primary"
                class="q-mx-xs"
                icon="search"
                :loading="loading"
                @click="query()"
              >
                <template v-slot:loading>
                  <q-spinner-ios class="on-center" />
                </template>
              </q-btn>
              <q-btn
                outline
                no-wrap
                unelevated
                label="重置"
                class="q-mx-xs"
                color="primary"
                icon="refresh"
                @click="searchReset"
              />
            </div>
          </q-item-section>
        </q-item>
        </q-form>
            <q-table flat color="primary" class="cross_table" separator="cell"
                     :columns="columns" :data="list" row-key="id"
                     :pagination.sync="pagination"
                     :visible-columns="group"
                     @request="query"
                     :rows-per-page-options="[10,20,50,100]"
                     :selection="mobile?'none':'multiple'"
                     :selected.sync="selected">

                <template #body-cell-opt="props">
                    <q-td :props="props" :auto-width="true">
                      <q-btn flat round dense color="info" icon="mdi-text-box-search-outline" @click="viewForm(props.row)">
                        <q-tooltip>查看表单</q-tooltip>
                    </q-btn>
                    </q-td>
                </template>
            </q-table>
        </div>
        <q-dialog flat persistent ref="viewDialog">
            <q-form class="dialog_card column">
                <h5 class="view_title justify-between q-px-md">
                    [主表]-{{editType}}
                    <q-btn dense outline round icon="clear" size="sm" v-close-popup />
                </h5>
                <q-scroll-area class="col">
                    <div class="row q-col-gutter-x-md dialog_form q-pa-md">
                        <div class="col row">
                            <div class="display-item col-6">
                                <div class="dynamic-form-item ">
                                    <div v-show="true" class="dynamic-form-item-label" style="width:100%;">
                                        <q-icon name="star" color="red" v-show="false" />
                                        标题
                                    </div>
                                    <q-input dense debounce="500" hide-bottom-space outlined v-model="form.messageHeader" type="text"  lazy-rules :rules="[]" readonly autogrow />
                                </div>
                            </div>
                            <div class="display-item col-6">
                                <div class="dynamic-form-item ">
                                    <div v-show="true" class="dynamic-form-item-label" style="width:100%;">
                                        <q-icon name="star" color="red" v-show="false" />
                                        通告对象
                                    </div>
                                    <q-input dense debounce="500" hide-bottom-space outlined v-model="form.userName" type="text" lazy-rules :rules="[]" readonly autogrow />
                                </div>
                            </div>
                            <div class="display-item col-6" >
                                <div class="dynamic-form-item ">
                                    <div v-show="true" class="dynamic-form-item-label" style="width:100%;">
                                        <q-icon name="star" color="red" v-show="false" />
                                        消息类型
                                    </div>
                                    <q-input dense debounce="500" hide-bottom-space outlined v-model="form.messageType" type="text" lazy-rules :rules="[]" readonly autogrow />
                                </div>
                            </div>
                            <div class="display-item col-12">
                                <div class="dynamic-form-item ">
                                    <div v-show="true" class="dynamic-form-item-label" style="width:100%;">
                                        <q-icon name="star" color="red" v-show="false" />
                                        内容
                                    </div>
                                    <div v-html="form.messageContent" />
                                </div>
                            </div>
                        </div>
                    </div>
                </q-scroll-area>
                <div class="row justify-center q-pa-md">
                    <q-btn outline color="primary" icon="mdi-close-thick" label="关闭" v-close-popup />
                </div>
            </q-form>
        </q-dialog>
        <confirm ref="confirmDialog" :msg="confirmMsg" @confirm="deleteBatch()" />
        <q-inner-loading :showing="loading">
            <q-spinner-gears size="50px" color="primary" />
        </q-inner-loading>
    </q-page>
</template>

<script>
import { IndexMixin } from 'boot/mixins';
import { getDictLabel } from 'boot/dictionary';
import confirm from 'components/confirm';

export default {
  name: 'SystemMessageRecording',
  mixins: [IndexMixin],
  components: {
    confirm,
  },
  data() {
    return {
      columns: [
        {
          name: 'index',
          align: 'center',
          label: '序号',
          field: 'index',
          headerClasses: 'cc-table-index',
        },
        {
          name: 'messageHeader', align: 'center', label: '标题', field: 'messageHeader',
        },
        {
          name: 'userName', align: 'center', label: '通告对象', field: 'userName',
        },
        {
          name: 'messageType', align: 'center', label: '消息类型', field: 'messageType',
        },
        {
          name: 'opt', align: 'center', label: '操作', field: 'id',
        },
      ],
      showQuery: true,
      headers: [{ name: 'Authorization', value: localStorage.Authorization }],
      uploadUrl: `${process.env.SERVER_URL}${process.env.BASE_URL}/sys/common/upload`,
      imgUrl: `${process.env.SERVER_URL}${process.env.BASE_URL}/sys/common/static`,
      url: {
        list: '/system/messageRecording/list',
        add: '/system/messageRecording/add',
        edit: '/system/messageRecording/edit',
        copy:
            '/system/messageRecording/copy',
        delete: '/system/messageRecording/delete',
        deleteBatch: '/system/messageRecording/deleteBatch',
        exportXlsUrl: '/system/messageRecording/exportXls',
        importExcelUrl: '/system/messageRecording/importExcel',
      },
    };
  },
  methods: {
    getDictLabel,
    viewForm(p) {
      this.form = {
        ...p,
      };
      this.$refs.viewDialog.show();
    },
    initDict() {
    },
  },
  mounted() {
    this.initDict();
  },
};
</script>

<style lang="stylus">

</style>
